<template>
  <t-tooltip :content="help" :trigger="cpTooltipTrigger" class="custom-input-switch">
    <t-switch v-model="valueThis"
              @change="_change"
              v-bind="$attrs"
              :readonly="readonly"
              :disabled="disabled"
              :flagValueBoolean="flagValueBoolean"
    >
    </t-switch>
  </t-tooltip>
</template>

<script>
export default {
  desc: '自定义开关',
  components: {},
  name: 'customSwitch',
  props: {
    /**
     * @Description：上级页面对象
     * @Date 2023-10-10
     */
    parent: {
      type: Object,
      default: () => {},
    },
    /**
     * @Description：上级表单对象
     * @Date 2023-10-10
     */
    form: {
      type: Object,
      default: () => {},
    },
    /**
     * @Description：输入提示信息
     * @Date 2023-10-10
     */
    help: {
      type: String,
      default: () => '',
    },
    /**
     * @Description：只读
     * @Date 2023-10-10
     */
    readonly: {
      type: Boolean,
      default: () => false,
    },
    /**
     * @Description：禁用
     * @Date 2023-10-10
     */
    disabled: {
      type: Boolean,
      default: () => false,
    },
    /**
     * @Description：值是否使用布尔类型，true: 返回true false false 返回 1 0
     * @Date 2023-10-10
     */
    flagValueBoolean: {
      type: Boolean,
      default: () => true,
    },
  },
  created() {
    this.bindFormItemProp()
  },
  data() {
    return {
      valueThis: false,

      // 表单配置
      formItemProp: {
        name: '',
        label: '',
      },
    }
  },
  methods: {
    // 值变化更新表单值
    _change() {
      console.log('flagValueBoolean', this.flagValueBoolean)
      if (this.flagValueBoolean) {
        this.parent.$set(this.form, this.formItemProp.name, this.valueThis)
      } else { // 格式化成 1 0
        if (this.constCommon.trueValueList.includes(this.valueThis)) {
          this.parent.$set(this.form, this.formItemProp.name, 1)
        } else {
          this.parent.$set(this.form, this.formItemProp.name, 0)
        }
      }
      this.$emit('change', this.valueThis)
    },

    /**
     * @Description：获取属性值
     * @Author wyt
     * @Date 2023-09-27
     */
    getPropValue(name, defaultValue) {
      if (this.$attrs && this.$attrs[name] != undefined) {
        return this.$attrs[name]
      }
      return defaultValue
    },
    /**
     * @Description：获取表单配置
     * @Author wyt
     * @Date 2023-09-27
     */
    bindFormItemProp() {
      if (!this.$parent.$options || !this.$parent.$options.propsData) {
        return false
      }
      this.formItemProp = {
        name: this.$parent.$options.propsData.name,
        label: this.$parent.$options.propsData.label,
      }

      if (!this.formItemProp.name) {
        return false
      }
      if (!this.formItemProp.label) {
        return false
      }
    },
    /**
     * @Description：聚焦事件
     * @Author wyt
     * @Date 2023-09-27
     */
    focus() {
      this.$emit('focus')
    },
  },
  watch: {
    // 监听表单设置本组件的值
    form: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        this.valueThis = false
        if (this.form) {
          if (this.constCommon.trueValueList.includes(this.form[this.formItemProp.name])) {
            this.valueThis = true
          } else {
            this.valueThis = false
          }
        }
      },
    },
    // 监听表单设置本组件的值
    disabled: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        this.bindFormItemProp()
        this.valueThis = false
        if (this.form) {
          if (this.constCommon.trueValueList.includes(this.form[this.formItemProp.name])) {
            this.valueThis = true
          } else {
            this.valueThis = false
          }
        }
      },
    },
  },
  computed: {
    cpTooltipTrigger() {
      return this.strings.isBlank(this.help) ? '' : 'hover'
    },
  },
}
</script>

<style lang="scss"></style>
